<template>
  <div id="bodyContainer">
    <top class="top"></top>
    <div class="bottom">
      <router-view ref="router"></router-view>
    </div>
  </div>
</template>

<script>
import top from "@/components/top";

export default {
  name: "container",
  components: {
    top
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.bodyContainer {
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 1200px;
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  height: $containerTop;
  z-index: 10;
}

.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: $containerTop;
  z-index: 1;
}

.navShadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 997;
  pointer-events: none;
}

.shadowLeft,
.shadowRight {
  width: 290px;
  position: absolute;
  top: 0;
  left: 0;
}

.shadowRight {
  left: unset;
  right: 0;
}

.shadowCenter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
</style>
